<template>
    <section>
        <div class="filter-container">
            <el-button size="mini" class="ml10" @click="handleCreate" type="primary" icon="el-icon-plus">新增</el-button>
        </div>
        <el-table :data="list" style="width: 100%">
            <el-table-column align="left" label="模板id">
                <template slot-scope="scope">
                    <span>{{ scope.row.id }}</span>
                </template>
            </el-table-column>
            <el-table-column align="left" label="模板名称">
                <template slot-scope="scope">
                    <span>{{ scope.row.name }}</span>
                </template>
            </el-table-column>
            <el-table-column align="left" label="模板描述">
                <template slot-scope="scope">
                    <span>{{ scope.row.describe }}</span>
                </template>
            </el-table-column>
            <!-- <el-table-column align="center" label="排序">
                <template slot-scope="scope">
                    <span>{{scope.row.orderNum}}</span>
                </template>
            </el-table-column> -->
            <el-table-column fixed="right" label="操作" width="100">
                <template slot-scope="scope">
                    <el-dropdown>
                        <el-button type="text">操作<i class="el-icon-arrow-down el-icon--right"></i></el-button>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item @click.native="handleUpdate(scope.row)">编辑</el-dropdown-item>
                            <el-dropdown-item @click.native="handleDelete(scope.row)">删除</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </template>
            </el-table-column>
        </el-table>
        <!-- <div v-show="!listLoading" class="pagination-container">
            <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="listQuery.page" :page-sizes="[20,30, 50]" :page-size="listQuery.num" layout="total, sizes, prev, pager, next, jumper" :total="total"> </el-pagination>
        </div> -->
        <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" :close-on-click-modal="false"
            width="1000px" @close="dialogClose">
            <el-form :model="form" :rules="rules" ref="form" label-width="150px">
                <el-form-item label="模板名称" prop="name">
                    <el-input size="mini" v-model="form.name" placeholder="" maxlength="24" />
                </el-form-item>
                <el-form-item label="模板描述" prop="describe">
                    <el-input size="mini" v-model="form.describe" placeholder="" maxlength="24" />
                </el-form-item>
                <el-form-item label="禁止下单区域" prop="describe">
                    <el-cascader style="width:100%;" filterable
                        :props="{ value: 'areaCode', label: 'name', children: 'areas', multiple: true, checkStrictly: true }"
                        size="mini" v-model="form.excludeRegions" :options="regionGroups"></el-cascader>
                </el-form-item>
                <el-form-item label="默认运费" prop="num">
                    <el-input type="number" min="1" size="mini" v-model="form.num" placeholder="" maxlength="3"
                        style="width:80px;" /> 件内，
                    <el-input type="number" size="mini" v-model="form.fee" placeholder="" maxlength="3"
                        style="width:80px;" />
                    元，
                    每增加
                    <el-input type="number" min="1" size="mini" v-model="form.addNum" placeholder="" maxlength="3"
                        style="width:80px;" /> 件内，
                    运费增加
                    <el-input type="number" size="mini" v-model="form.addFee" placeholder="" maxlength="3"
                        style="width:80px;" /> 元
                </el-form-item>
                <!-- <el-form-item label="排序" prop="orderNum">
                    <common-input v-model="form.orderNum" class="w60" maxlength="3" />
                </el-form-item> -->
            </el-form>

            <el-table :data="regionData" style="width:88%;margin:20px;" max-height="680" :cell-style="tc"
                :header-cell-style="tccolor" type='index'>
                <el-table-column label="运送区域" align="left">
                    <template slot-scope="scope">
                        {{ scope.row.area }}
                        <!-- <div style="color:#f4222d;cursor:pointer;float:right;" @click="editSelectCity(scope.row.region_ids)">编辑</div> -->
                    </template>
                </el-table-column>
                <!-- <el-table-column label="是否包邮">
                <template slot-scope="scope">
                    <el-select v-model="scope.row.isFreeFreight" size="mini" placeholder="请选择是否包邮">
                        <el-option value='0' label="不包邮"></el-option>
                        <el-option value='1' label="包邮"></el-option>
                    </el-select>
                </template>
            </el-table-column>
            <el-table-column label="当前区域增收运费比（倍数）">
                <template slot-scope="scope">
                            <el-input type="number" min="1" size="mini" v-model="scope.row.freightRate">
                        </el-input>
                </template>

            </el-table-column> -->
                <el-table-column label="首件">
                    <template slot-scope="scope">
                        <el-input type="number" min="1" size="mini" v-model="scope.row.num">
                        </el-input>
                    </template>
                </el-table-column>
                <el-table-column label="首费">
                    <template slot-scope="scope">
                        <el-input type="number" size="mini" v-model="scope.row.fee">
                        </el-input>
                    </template>
                </el-table-column>
                <el-table-column label="续件">
                    <template slot-scope="scope">
                        <el-input type="number" min="1" size="mini" v-model="scope.row.addNum">
                        </el-input>
                    </template>
                </el-table-column>
                <el-table-column label="续费">
                    <template slot-scope="scope">
                        <el-input type="number" size="mini" v-model="scope.row.addFee">
                        </el-input>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button size='mini'
                            @click="deleteSelCheckCity(scope.row.area, scope.row.regionIds)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <el-button size="mini" style="float:right;margin-right:50px;"
                @click="addTemplateRegionGroups">添加</el-button>
            <div slot="footer" class="dialog-footer">
                <el-button size="mini" @click="cancel('form')">取消</el-button>
                <el-button size="mini" v-if="dialogStatus == 'create'" type="primary"
                    @click="create('form')">确定</el-button>
                <el-button size="mini" v-else type="primary" @click="update('form')">确定</el-button>
            </div>
        </el-dialog>

        <el-dialog title="选择区域" :visible.sync="isShowRegionGroups" :close-on-click-modal="false" width="720px">
            <p style="color:#f4222d;padding:12px 12px;">区域在同一个模版仅支持一次选择,已选区域会自动过滤</p>
            <div v-for="(item, index) in regionGroups" :key="'g' + index"
                style="margin:0 0 12px 12px;width:100%;height:30px;">
                <!-- <el-checkbox style="" v-model="checkAllGroup[index]" @change="handleCheckAllChange(index)">{{item.name}}</el-checkbox>
              <el-checkbox-group v-model="checkedCities[index]" @change="handleCheckedCitiesChange">
                <el-checkbox v-for="city in item.areas" :label="city" :key="city.id">{{city.name}}</el-checkbox>
              </el-checkbox-group> -->
                <div>

                    <div class="icon-span-gray" v-if="selectAreaArray[index] === true">
                        <i class="el-icon-check"></i>
                    </div>

                    <div class="icon-span" v-else
                        :class="checkAllGroup[index] === true ? 'icon-span-select' : 'icon-span'"
                        @click="handleCheckAllChange(index)">
                        <i class="el-icon-check"></i>
                    </div>

                    <p style="font-weight:700;float:left;margin-right:12px;color:#999;"
                        v-if="selectAreaArray[index] === true">
                        {{ item.name }}</p>
                    <p style="font-weight:700;float:left;margin-right:12px;" v-else>{{ item.name }}</p>

                    <div v-for="(city, loc) in item.areas" :key="'s' + loc">

                        <div class="icon-span-gray" v-if="selectCityIds[index][loc] !== 0">
                            <i class="el-icon-check"></i>
                        </div>

                        <div class="icon-span" v-else
                            :class="checkCityGroup[index][loc] === true ? 'icon-span-select' : 'icon-span'"
                            @click="handleCheckedCitiesChange(city.id, city.name, loc, index)">
                            <i class="el-icon-check"></i>
                        </div>

                        <p style="float:left;margin-right:12px;color:#999;" v-if="selectCityIds[index][loc] !== 0">
                            {{ city.name }}
                        </p>
                        <p style="float:left;margin-right:12px;" v-else>{{ city.name }}</p>
                    </div>
                </div>

            </div>
            <div slot="footer" class="dialog-footer">
                <el-button size="mini" @click="isShowRegionGroups = false">取消</el-button>
                <el-button size="mini" type="primary" @click="okSelectRegion()">确定</el-button>
            </div>
        </el-dialog>
    </section>
</template>

<script>
import {
    isIntegerNotMust
} from '../../utils/validator'
import {
    product_freight_template_list,
    product_freight_template_save,
    product_freight_template_detail,
    product_freight_template_delete,
    region_group_list
} from '../../api/product';
export default {
    components: {
    },
    data() {
        return {
            isShowRegionGroups: false,
            regionData: [],
            dialogRegionVisible: false,
            isIndeterminateGroup: [],
            checkAllGroup: [],
            checkedCities: [],
            checkCityName: [],
            checkCityGroup: [],

            selectCityIds: [],
            selectAreaArray: [],
            list: null,
            listLoading: true,
            listQuery: {
                keyword: undefined,
            },
            total: null,
            dialogStatus: '',
            dialogFormVisible: false,
            textMap: {
                update: '编辑运费模板',
                create: '新增运费模板'
            },
            selectCityCodes:[],
            regionGroups: [],
            form: {
                id: undefined,
                name: undefined,
                describe: undefined,
                num: 1,
                fee: undefined,
                addNum: 1,
                addFee: undefined,
                excludeRegions: [],
                excludeRegionIds: "",
            },
            rules: {
                name: [
                    {
                        required: true,
                        message: '请输入模板名称',
                        trigger: 'blur'
                    }
                ],
            },
        }
    },
    mounted() {
    },
    created() {
        this.getRegionGroup();
        this.getList();
    },

    methods: {
        //删除所选区域
        deleteSelCheckCity(name, arrids) {
            this.regionData.map((item, index) => {
                if (item.area == name) {
                    this.regionData.splice(index, 1)
                }
            })

            var areaarr = [];
            this.checkAllGroup.map(item => {
                console.log(item)
                areaarr.push(false)
            })
            this.selectAreaArray = areaarr

            //同时把所选的id设置为可以选择
            arrids.map(idItem => {
                this.selectCityIds.map((item, index) => {
                    item.map((cc, loc) => {
                        if (cc == idItem) {
                            this.selectCityIds[index][loc] = 0
                            this.checkAllGroup[index] = false
                        }
                    })
                })
            })

        },
        //获取模版区域
        addTemplateRegionGroups() {
            this.isShowRegionGroups = true
            // console.log(this.checkAllGroup)
        },
        tc() {
            return "text-align:center; color:#333333; font-size:12px;";
        },
        tccolor() {
            return "text-align:center;background-color:#f5f5f5; font-size:14px;";
        },
        handleCheckedCitiesChange(id, name, loc, index) {
            if (this.checkCityGroup[index][loc] === false) {
                this.checkCityGroup[index][loc] = true
                this.checkedCities[index][loc] = this.regionGroups[index].areas[loc]
                // this.selectCityIds[index][loc] = id
            } else {
                this.checkCityGroup[index][loc] = false
                this.checkedCities[index][loc] = {}
                // this.selectCityIds[index][loc] = 0
            }

            this.$forceUpdate()
            // let checkedCount = value.length;
            // this.checkAll = checkedCount === this.cities.length;
            // this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
        },
        handleCheckAllChange(index) {
            if (this.checkAllGroup[index] === false) {

                this.checkAllGroup[index] = true
                var citySelArr = []
                var cityarr = []
                // var cityIdarr = []

                this.regionGroups[index].areas.map(sel => {
                    citySelArr.push(sel)
                    cityarr.push(true)
                    // cityIdarr.push(sel.id)
                })
                this.checkedCities[index] = citySelArr
                this.checkCityGroup[index] = cityarr
                // this.selectCityIds[index]   = cityIdarr
                console.log(this.checkedCities)
                console.log(this.checkCityGroup)
                // console.log(this.selectCityIds)
            } else {
                this.checkAllGroup[index] = false

                this.checkCityGroup[index].map((item => {
                    console.log(item)

                }))


                var citySelArr1 = []
                var cityarr1 = []
                // var cityIdarr1 = []
                this.regionGroups[index].areas.map(sel => {
                    console.log(sel)
                    cityarr1.push(false)
                    //  cityIdarr1.push(0)
                    citySelArr1.push({})
                })
                this.checkedCities[index] = citySelArr1
                this.checkCityGroup[index] = cityarr1
                // this.selectCityIds[index] = cityIdarr1
                console.log(this.checkedCities)
                console.log(this.checkCityGroup)
                // console.log(this.selectCityIds)
            }
            this.$forceUpdate()
            // this.checkedCities[index] = val ? cityOptions : [];
            // this.isIndeterminate[index] = false;
        },
        okSelectRegion() {
            //判断所选城市是否包含已选城市

            var idArr = []
            var nameArr = []
            var codeArr = []
            this.checkedCities.map((item, index) => {
                item.map((cc, loc) => {
                    if (cc && cc.id && cc.name) {
                        idArr.push(cc.id)
                        nameArr.push(cc.name)
                        codeArr.push(cc.areaCode)
                        // var index = item.indexOf(cc)
                        // item.splice(index,1)
                        this.selectCityIds[index][loc] = cc.id
                    }
                })
            })
            console.log(codeArr, '/////////////////////')
            if (codeArr.length) {
                var t = false
                this.regionData.map(item => {
                    if (item && item.regionIds) {
                        codeArr.map(ccId => {
                            if (item.regionIds.indexOf(ccId) > -1) {
                                t = true
                                return;
                            }
                        })

                        if (t) {
                            return
                        }
                    }
                })

                if (t) {
                    this.$message.error('不能包含已经选择城市或者区域')

                    return
                } else {
                    this.checkAllGroup.map((item, index) => {
                        if (item) {
                            this.selectAreaArray[index] = true
                        }
                    })
                    var checkArr = []
                    var checkCityArr = []
                    this.checkCityGroup.map(ss => {
                        var ssArr = []
                        var ccarr = []
                        ss.map(ff => {
                            console.log(ff)
                            ssArr.push(false)
                            ccarr.push({})
                        })
                        checkArr.push(ssArr)
                        checkCityArr.push(ccarr)
                    })
                    this.checkCityGroup = checkArr
                    this.checkedCities = checkCityArr
                    console.log(this.checkCityGroup)
                    console.log(this.checkedCities)

                    this.isShowRegionGroups = false
                    this.regionData.push({ area: nameArr.join(','), num: '1', fee: '', addNum: '1', addFee: '', regionIds: codeArr })
                }

            } else {
                this.$message.error('所选城市不能为空')

            }
        },
        getRegionGroup() {
            region_group_list().then((res) => {
                console.log(res,'getRegionGroup')
                this.regionGroups = res.data;
                this.resetRegion();
            }).catch((err) => {

            })
        },
        getList() {
            this.listLoading = true;
            product_freight_template_list(this.listQuery).then(response => {
                this.list = response.data;
                this.listLoading = false;
            })
        },
        handleCreate() {
            this.resetTemp();
            this.dialogStatus = 'create';
            this.dialogFormVisible = true;
        },
        resetRegion() {
            this.regionData = []
            this.selectCityIds = []
            this.checkAllGroup = []
            this.checkCityGroup = []
            this.checkedCities = []
            this.selectAreaArray = []
            var codearr = []
            this.regionGroups.map(item => {
                // console.log(item)
                this.checkAllGroup.push(false)
                this.selectAreaArray.push(false)
                var arr = []
                var checkcArr = []
                var idarr = []

                item.areas.map(city => {
                    let dat = {code:'',name:''}
                    dat.code=city.areaCode
                    dat.name=city.name
                    codearr.push(dat)
                    arr.push(false)
                    checkcArr.push({})
                    idarr.push(0)

                })

                this.checkCityGroup.push(arr)
                this.checkedCities.push(checkcArr)
                this.selectCityIds.push(idarr)


            })
            console.log(codearr,'city',this.selectCityIds)
            this.selectCityCodes=codearr
            // console.log(this.selectCityCodes,'checkCityGroup')
        },
        resetTemp() {
            this.form = {
                id: undefined,
                name: undefined,
                describe: undefined,
                num: 1,
                fee: undefined,
                addNum: 1,
                addFee: undefined,
                excludeRegions: [],
                excludeRegionIds: "",
            };
            this.resetRegion();
        },
        create(formName) {
            console.log(this.form, this.regionData)
            const set = this.$refs;
            set[formName].validate(valid => {
                if (valid) {
                    let excludeRegionIds = [];
                    if (this.form.excludeRegions && this.form.excludeRegions.length > 0) {
                        this.form.excludeRegions.forEach((item) => {
                          if (item[item.length - 1]) {
                                excludeRegionIds.push(item[item.length - 1]);
                            }
                        })
                    }
                    this.form.excludeRegionIds = excludeRegionIds.join(",");
                    // var t = true
                    // this.regionData.map(item => {
                    //     if(item.isFreeFreight && item.freightRate >= 1){
                    //         t = true
                    //     }else{
                    //         t = false
                    //     }
                    // })

                    // if(!t){
                    //     this.$message.error('选择包邮的区域运费比例默认为0,不包邮的运费比例不能低于1')
                    //     return
                    // }
                    var arr = []
                    this.regionData.map((item, index) => {
                        arr.push({
                            regionIds: item.regionIds,
                            isFreeFreight: item.isFreeFreight,
                            freightRate: item.freightRate,
                            num: Number(item.num),
                            fee: Number(item.fee),
                            addNum: Number(item.addNum),
                            addFee: Number(item.addFee),
                            groupId: index + 1

                        })
                    })
                    console.log(arr, 'arr')
                    // return
                    this.form.zoneConfig = arr;
                    product_freight_template_save(this.form)
                        .then(() => {
                            this.dialogFormVisible = false;
                            this.getList();
                            this.$message.success("运费模板创建成功");
                        })
                } else {
                    return false;
                }
            });
        },
        update(formName) {

            // return
            // this.$message.error('选择包邮的区域运费比例默认为0,不包邮的运费比例不能低于1')
            const set = this.$refs;
            set[formName].validate(valid => {
                if (valid) {
                    let excludeRegionIds = [];
                    if (this.form.excludeRegions && this.form.excludeRegions.length > 0) {
                        this.form.excludeRegions.forEach((item) => {
                          // console.log(item)
                            if (item[item.length - 1]) {
                                excludeRegionIds.push(item[item.length - 1]);
                            }
                        })
                    }
                    this.form.excludeRegionIds = excludeRegionIds.join(",");
                    console.log(this.form, '111111111111')
                    // console.log(this.form);
                    // return;
                    // console.log(this.regionData)
                    // var t = true
                    // this.regionData.map(item => {
                    //     if(item.isFreeFreight && item.freightRate >= 1){
                    //         t = true
                    //     }else{
                    //         t = false
                    //     }
                    // })

                    // if(!t){
                    // this.$message.error('选择包邮的区域运费比例默认为0,不包邮的运费比例不能低于1')
                    //     return
                    // }
                    var arr = []
                    this.regionData.map(item => {
                        arr.push({
                            regionIds: item.regionIds,
                            isFreeFreight: item.isFreeFreight,
                            freightRate: item.freightRate,
                            num: item.num,
                            fee: item.fee,
                            addNum: item.addNum,
                            addFee: item.addFee
                        })
                    })
                    this.form.zoneConfig = arr;
                    this.dialogFormVisible = false;
                    this.form.password = undefined;
                    product_freight_template_save(this.form).then(() => {
                        this.dialogFormVisible = false;
                        this.getList();
                        this.$message.success("运费模板更新成功");
                    });
                } else {

                    return false;
                }
            });
        },
        cancel(formName) {
            this.dialogFormVisible = false;
            this.$refs[formName].resetFields();
        },
        handleUpdate(row) {
            this.resetRegion();
            product_freight_template_detail(row.id).then((res) => {
                this.form = res.data;
                console.log(res.data)
                let excludeRegions = [];
                if (this.form.excludeRegionIds) {
                    let a = this.form.excludeRegionIds.split(",");
                    a.forEach((item) => {
                        if (item && item > 0) {
                            this.regionGroups.forEach((item2) => {
                                let has = false;
                                item2.areas.forEach((item3) => {
                                    if (item3.areaCode == item) {
                                        excludeRegions.push(
                                            [
                                                item2.areaCode,
                                                item3.areaCode
                                            ]
                                        )
                                        has = true;
                                        return false;
                                    } else {
                                        item3.areas.forEach((item4) => {
                                            if (item4.areaCode == item) {
                                                excludeRegions.push(
                                                    [
                                                        item2.areaCode,
                                                        item3.areaCode,
                                                        item4.areaCode
                                                    ]
                                                )
                                                has = true;
                                                return false;
                                            }
                                        });

                                        if (has) {
                                            return false;
                                        }
                                    }
                                })

                                if (has) {
                                    return false;
                                }
                            })
                        }
                    })
                }

                this.form.excludeRegions = excludeRegions;
                console.log(this.regionGroups)

                if (res.data.zoneList.length > 1) {
                    var regionArr = []
                    this.regionGroups.map((item, index) => {
                        item.areas.map((cc, loc) => {

                            res.data.zoneList.map(config => {
                                if (config.regionId == cc.areaCode) {
                                    this.selectCityIds[index][loc] = cc.id
                                }
                            })
                        })
                    })
                    console.log(res.data.zoneList, res.data.zoneConfig)

                    // this.selectCityCodes
                    let zoneConfigs =  res.data.zoneConfig
                    let areaString =[]
                    zoneConfigs.map(item => {

                        var obj = {
                            regionIds: item.regionIds,
                            isFreeFreight: item.isFreeFreight,
                            freightRate: item.freightRate,
                            num: item.num,
                            fee: item.fee,
                            addNum: item.addNum,
                            addFee: item.addFee,
                            cityname:[],
                            area:''
                        }

                        item.regionIds.map(cc => {

                            let str = this.selectCityCodes.find(item=>item.code==cc)

                            console.log(cc,str)
                            obj.cityname.push(str.name)
                        })
                        obj.area = obj.cityname.join(',')
                        areaString.push(obj)
                    })

                    console.log(areaString,"areaString",this.selectCityIds,this.selectCityCodes)
                    this.regionData = areaString
                    var ttconfig = res.data.zoneList
                    for (var i = 0; i < ttconfig.length; i++) {

                        var obj1 = ttconfig[i]
                        var arr = [obj1]
                        for (var j = i + 1; j < ttconfig.length; j++) {
                            var obj2 = ttconfig[j]
                            if (obj2.isFreeFreight === obj1.isFreeFreight && obj2.freightRate === obj1.freightRate) {
                                arr.push(obj2)
                                ttconfig.splice(j, 1)
                                j = j - 1;
                            }

                        }
                        regionArr.push(arr)
                    }


                    //  console.log(this.selectCityIds)

                    regionArr.map(item => {
                        var cityname = []
                        var idArr = []
                        var is_free_freight = String(item[0].isFreeFreight)
                        var freight_rate = String(item[0].freightRate)
                        var num = String(item[0].num)
                        var fee = String(item[0].fee)
                        var addNum = String(item[0].addNum)
                        var addFee = String(item[0].addFee)
                        item.map(tt => {
                            this.regionGroups.map(regionItem => {
                                regionItem.areas.map(cc => {
                                    if (cc.id == tt.regionId) {
                                        cityname.push(cc.name)
                                        idArr.push(cc.id)
                                        return
                                    }
                                })
                            })

                        })
                        // this.regionData.push({ regionIds: idArr, isFreeFreight: is_free_freight, freightRate: freight_rate, area: cityname.join(','), num: num, fee: fee, addNum: addNum, addFee: addFee })
                    })
                } else if (res.data.zoneList.length == 1) {
                    var cityename = ''
                    this.regionGroups.map(regionItem => {
                        regionItem.areas.map(cc => {
                            if (cc.id == res.data.zoneList[0].regionId) {
                                cityename = cc.name
                                return
                            }
                        })
                    })
                    this.regionData.push({ regionIds: [res.data.zoneList[0].regionId], isFreeFreight: String(res.data.zoneList[0].isFreeFreight), freightRate: String(res.data.zoneList[0].freightRate), area: cityename, num: String(res.data.zoneList[0].num), fee: String(res.data.zoneList[0].fee), addNum: String(res.data.zoneList[0].addNum), addFee: String(res.data.zoneList[0].addFee) })
                }

                this.dialogFormVisible = true;
                this.dialogStatus = 'update';

            }).catch((err) => {

            })
        },
        handleDelete(row) {
            this.$confirm('此操作将永久删除, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    product_freight_template_delete(row.id)
                        .then(() => {
                            this.$message.success("运费模板删除成功");
                            const index = this.list.indexOf(row);
                            this.list.splice(index, 1);
                        });
                }).catch(() => { });
        },
        dialogClose() {
            this.$refs.form.resetFields();
        },
        handleFilter() {
            this.getList();
        },
        handleSizeChange(val) {
            this.listQuery.num = val;
            this.getList();
        },
        handleCurrentChange(val) {
            this.listQuery.page = val;
            this.getList();
        }
    }
};
</script>
<style lang="scss" scoped>
.icon-span {
    width: 20px;
    height: 20px;
    border: 1px solid #d8d8d8;
    background-color: #fff;
    text-align: center;
    margin-right: 8px;
    float: left;
    line-height: 20px;

    i {
        color: #fff;
    }

}

.icon-span-gray {
    width: 20px;
    height: 20px;
    border: 1px solid #d8d8d8;
    background-color: #f8f8f8;
    text-align: center;
    margin-right: 8px;
    float: left;
    line-height: 20px;

    i {
        color: #666;
    }
}

.icon-span-select {
    background-color: #f4222d;

    i {
        color: #fff;
    }

}
</style>
